<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
    <style>
        .check {
            padding: 10px;
            background-color: #56a5f1;
            color: #fff;
        }
        .content {
            margin-top: 20px;
            width: 300px;
            height: 300px;
            border: 1px solid #333;
        }
    </style>
</head>
<body>
    <div id="app">
        <span class="check" @click="showType = 1">cart</span>
        <span class="check" @click="showType = 2">todoList</span>
        <div class="content" v-show="showType === 1">
            <table border="1">
                <tr>
                    <td>全选<input type="checkbox" v-model="allCheck" @change="checkAll"></td>
                    <td>名称</td>
                    <td>单价</td>
                    <td>数量</td>
                    <td>小计</td>
                </tr>
                <tr v-for="(item,index) in list" :key="index+'goods'">
                    <td><input type="checkbox" v-model="item.isCheck" @change="checkSelf"></td>
                    <td>{{item.name}}</td>
                    <td>{{item.price}}</td>
                    <td>{{item.num}}</td>
                    <td>{{item.num * item.price}}</td>
                </tr>
                <tr>
                    <td>总计</td>
                    <td>{{totalPrice}}</td>
                </tr>
            </table>
        </div>
        <div class="content" v-show="showType === 2">todoList</div>
        
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                // 1 cart  2 todo
                showType: 1,
                list: [
                    {name: 'apple', price: 4999, num: 2, isCheck: false},
                    {name: 'mi', price: 6999, num: 5, isCheck: false},
                    {name: 'njy', price: 3999, num: 5, isCheck: false}
                ],
                allCheck: false
            },
            computed: {
                totalPrice() {
                    let num = 0
                    this.list.forEach(item => {
                        // debugger 调试代码，执行时会卡在这里 按f10执行一行 按f8执行到下一个断点处
                        if(item.isCheck) {
                            num += item.price * item.num
                        }
                    })
                    return num 
                }
            },
            methods: {
                checkAll() {
                    // 全选按钮，点进后将他的状态应用给每一个商品
                    this.list.forEach((item,index) => {
                        item.isCheck = this.allCheck
                    });
                },
                checkSelf() {
                    // every 类似判断中的&&  some类似||
                    // 单个商品的选择 点击后需要遍历所有商品，判断是否全选
                    this.allCheck = this.list.every(item => {
                        return item.isCheck
                    })
                }
            }
        })
    </script>
</body>
</html>